<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">头部设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.headHeight"
        />
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.backgroundColor"
        />
      </el-form-item>
    </div>

    <!--科室设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">诊室设置</el-divider>
      </div>


      <el-form-item label="科室隐藏" v-if="false">
        <el-switch v-model="optionsInfo.deptShow"/>
      </el-form-item>


      <el-form-item label="诊室">
        <el-switch v-model="optionsInfo.roomShow"/>
      </el-form-item>


      <!--诊室选中字段-->
      <template v-if="optionsInfo.roomShow">
        <roomNameKeyEditor
            :designer="designer"
            :selected-widget="selectedWidget"
            :option-model="optionModel"
        />
      </template>


      <el-form-item label="诊室字号">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.roomFontsize"
        />
      </el-form-item>

      <el-form-item label="粗细设置">
        <el-select v-model="optionsInfo['roomFontWeight']" placeholder="请选择">
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

    </div>
    <!--医生设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">医生设置</el-divider>
      </div>
      <el-form-item label="医生显示设置" class="follow-dept">
        <el-select v-model="optionsInfo['doctorOrder']" placeholder="请选择">
          <el-option
              v-for="item in doctorShown"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

    </div>

    <!--就诊设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">就诊设置</el-divider>
      </div>

      <el-form-item label="粗细设置">
        <el-select v-model="optionsInfo?.current.fontWeight" placeholder="请选择">
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>

    </div>
    <!--候诊设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">候诊设置</el-divider>
      </div>

      <el-form-item label="粗细设置">
        <el-select v-model="optionsInfo?.waiting.fontWeight" placeholder="请选择">
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
        </el-select>
      </el-form-item>

    </div>

    <!--候诊设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">候诊设置</el-divider>
      </div>

      <template v-if="true">
        <el-form-item label="候诊类型设置" class="wait-patient-set">
          <el-radio-group v-model="optionsInfo.waitPatientType" @change="handleChangeType">
            <el-radio :label="item.value" v-for="item in waitPatientTypeOptions" :key="item.value">
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <!--候诊等待设置-->
        <template v-if="(optionsInfo.waitPatientType)===1">
          <el-form-item label="候诊就诊" class="wait-patient-set">
            <el-radio-group v-model="optionsInfo.waitMode"
                            :disabled="optionsInfo.waitingPatientHide">
              <el-radio :label="item.value" v-for="item in options" :key="item.value">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </template>


        <template v-if="(optionsInfo.waitPatientType)===2">
          <el-form-item label="列表是否滚动">
            <el-switch v-model="optionsInfo.openScroll" :disabled="true"/>
          </el-form-item>

          <el-form-item label="候诊的人数">
            <el-input-number
                v-model="optionsInfo.waitPatientNumber"
                :min="1"
                :max="6"
                size="small"
                class="hide-spin-button"
            />
          </el-form-item>

          <el-form-item label="滚动速度">
            <el-input-number
                v-model="optionsInfo.waitPatientStep"
                :min="1"
                :max="4"
                size="small"
                class="hide-spin-button"
                :disabled="!(optionsInfo.openScroll)"
            />
          </el-form-item>

          <el-form-item label="滚动的人数">
            <el-input-number
                v-model="optionsInfo.waitPatientScrollNumber"
                :min="5"
                :max="99"
                size="small"
                class="hide-spin-button"
                :disabled="!(optionsInfo.openScroll)"
            />
          </el-form-item>
        </template>
      </template>
    </div>

    <!-- 二维码设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">二维码设置</el-divider>
      </div>

      <el-form-item label="互联网医院" class="logo-area-set">
        <el-button type="primary" @click="handleSelect('hospitalCode',(optionsInfo.hospitalCode))">互联网医院</el-button>
        <div class="picture-wrap">
          <template v-if="!!(!!(optionsInfo?.hospitalCode)&&!!(optionsInfo?.hospitalCode?.length)&&!!(optionsInfo?.hospitalCode[0].url))">
            <img :src="`${optionsInfo.hospitalCode[0].url}`" alt="互联网医院"/>
            <p class="icon-wrap" @click="handleDeletePicture('hospitalCode')">
              <i class="el-icon-close icon-delete"/>
            </p>
          </template>
          <template v-else>
            <div class="el-upload el-upload--text" @click="handleSelect">
              <i class="el-icon-plus avatar-uploader-icon"/>
            </div>
          </template>
        </div>
      </el-form-item>
      <el-form-item label="公众号" class="logo-area-set">
        <el-button type="primary" @click="handleSelect('publicCode',(optionsInfo.publicCode))">公众号</el-button>
        <div class="picture-wrap">
          <template  v-if="!!(!!(optionsInfo?.publicCode)&&!!(optionsInfo?.publicCode?.length)&&!!(optionsInfo?.publicCode[0].url))">
            <img :src="`${optionsInfo.publicCode[0].url}`" alt="公众号"/>
            <p class="icon-wrap" @click="handleDeletePicture('publicCode')">
              <i class="el-icon-close icon-delete"/>
            </p>
          </template>
          <template v-else>
            <div class="el-upload el-upload--text" @click="handleSelect">
              <i class="el-icon-plus avatar-uploader-icon"/>
            </div>
          </template>
        </div>
      </el-form-item>

    </div>

    <!--文本内容-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">文本内容</el-divider>
      </div>

      <el-form-item label="文本内容" class="logo-area-set">
        <el-button type="primary" size="small" @click="handleSelect('describeContent',(optionsInfo.describeContent))">
          文本内容
        </el-button>
      </el-form-item>

    </div>

    <!--选择图片的弹层-->
    <UpdatePicture
        :visible="pictureInfo.visible"
        :info="pictureInfo.info"
        @handleCancel="handleCancel"
        @handleSure="handleSure"
    />

     <!--更新文本内容-->
    <updateFormEditor
        :visible="formEditorInfo.visible"
        :info="formEditorInfo.info"
        @handleCancel="handleCancel"
        @handleSure="handleSure"
    />
  </div>
</template>

<script>
import roomNameKeyEditor from '../basicInfo/roomNameKey-editor.vue'
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import UpdatePicture from "@c/public/layer/template/updatePicture/index.vue";
import updateFormEditor from "@c/public/layer/template/updateFormEditor/index.vue";
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "DRCDoctorCodeConfig-editor",

  componentName: "DRCDoctorCodeConfig-editor",

  components: {updateFormEditor, UpdatePicture,roomNameKeyEditor},

  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      radio: 1,
      options: [
        {
          value: 1,
          label: '叫1等1'
        },
        {
          value: 2,
          label: '叫1等2'
        },
        {
          value: 3,
          label: '叫1等3'
        },
        {
          value: 4,
          label: '叫1等4'
        },
        {
          value: 5,
          label: '叫1等5'
        },
        {
          value: 6,
          label: '叫1等6'
        },
      ],
      waitPatientTypeOptions: [
        {
          value: 1,
          label: '诊室等候'
        },
        {
          value: 2,
          label: '候诊列表'
        }
      ],
      pictureInfo: {
        info:Object(),
        visible: false
      },
      formEditorInfo: {
        info:Object(),
        visible: false
      },
      optionsInfo: Object(),
      constantDic: constantDic,
      predefineColors: types['predefineColors'],
      fontWeightOptions: types['fontWeightOptions'],
      doctorShown: [
        {
          value: 1,
          label: '医生:顺序优先'
        },
        {
          value: 2,
          label: '医生:时间优先'
        }
      ],
    }
  },

  methods: {
    // 选择图片
    handleSelect(val,content) {
      let params = Object();
      switch (val) {
        case 'publicCode':
        case 'hospitalCode':
          let content2 = !!((content?.length)&&(content[0]?.url))? content : ''
          Reflect.set(params,'updataType',val);
          Reflect.set(params,'type','image');
          Reflect.set(params,'multiple',false);
          Reflect.set(params,'content',content2 || '')
          Reflect.set((this.pictureInfo), 'visible', true);
          Reflect.set((this.pictureInfo), 'info', params);
          break
        case 'describeContent':
          Reflect.set(params,'updataType',val);
          Reflect.set(params,'content',content || '')
          Reflect.set((this.formEditorInfo), 'visible', true);
          Reflect.set((this.formEditorInfo), 'info', params);
          break
      }
    },

    // 删除图片
    handleDeletePicture(key) {
      Reflect.set((this.optionsInfo), key,'')
    },

    // 关闭弹层
    handleCancel() {
      Reflect.set(this.pictureInfo, 'visible', false);
      Reflect.set(this.formEditorInfo, 'visible', false)
    },

    // 更新就的数据
    handleSure(valInfo) {
      let {key, val} = valInfo;
      Reflect.set((this.optionsInfo), key, val);
    },


    handleChangeType(val) {
      if (val === 1) {
        this.optionsInfo.openScroll = false;
        this.optionsInfo.waitPatientStep = 1;
        this.optionsInfo.waitPatientScrollNumber = 6;
        this.optionsInfo.waitPatientNumber = 6;
      } else if (val === 2) {
        this.optionsInfo.waitMode = 1
      }
    },
  },

  watch: {
    optionModel: {
      handler: function (val) {
        let key = val.config;
        this.optionsInfo = (val[key]);
      },
      deep: true,
      immediate: true
    }
  }
}
</script>


<style lang="scss" scoped>
.wait-patient-set {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;;

    .el-radio-group {
      display: flex;
      flex-direction: column;

      .el-radio {
        padding: 10px 0;
      }
    }
  }

}

.logo-area-set {
  display: flex;
  position: relative;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
    display: flex;
    @include fontWeight()
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-button {
      position: absolute;
      top: -30px;
      right: 0;
    }

    .picture-wrap {
      margin-top: 10px;
      position: relative;
      overflow: hidden;
      width: 108px;
      height: 108px;

      img {
        border-radius: 4px;
        overflow: hidden;
        width: 100%;
      }

      .icon-wrap {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        border-radius: 0 0 100px 0;

        .icon-delete {
          font-weight: bold;
          color: rgba(255, 255, 255, 0.8);
        }
      }

      .el-upload {
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        width: 108px;
        height: 108px;
        cursor: pointer;
        line-height: 116px;
        vertical-align: top;

        &:hover {
          border-color: #409eff;
          color: #409eff;
        }

        .el-icon-plus {
          font-size: 1.25rem;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }

  }
}
</style>